<template>
  <div class="dashboard-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h1 class="page-title">数据统计分析</h1>
    </div>

    <!-- 图表分析区域 - 饼图展示 -->
    <el-row :gutter="20" class="charts-row">
      <!-- 中奖参与与未参与人数统计饼图 -->
      <el-col :xs="12" :lg="6">
        <el-card class="chart-card" hover-shadow>
          <div class="chart-header">
            <h3 class="chart-title">参与情况统计</h3>
          </div>
          <div class="chart-content">
            <div id="participationChart" class="chart-container"></div>
            <div class="chart-legend">
              <div class="legend-item" v-for="(item, index) in participationData" :key="index">
                <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
                <span class="legend-text">{{ item.name }} ({{ item.value }}人)</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 商品一中奖率饼图 -->
      <el-col :xs="12" :lg="7">
        <el-card class="chart-card" hover-shadow>
          <div class="chart-header">
            <h3 class="chart-title">奖品中奖人数</h3>
          </div>
          <div class="chart-content">
            <!-- <div id="productOneChart" class="chart-container"></div> -->
            <div class="chart-legend " >
              <div class="legend-item" style="margin-right: 10px;" v-for="(item, index) in productOneData" :key="index">
                <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
                <span class="legend-text">{{ item.name }} ({{ item.value }}人)</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

        <!-- 区域分布统计 -->
      <el-col :xs="24" :lg="11">
        <el-card class="chart-card" hover-shadow >
          <div class="chart-header">
            <h3 class="chart-title">区域分布统计</h3>
          </div>
          <div class="chart-content" style="height: 240px;">
            <div id="regionChart" class="chart-container"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>



    <!-- 积分兑换数据表 -->
    <el-row :gutter="20" class="table-row">
      <el-col :xs="24">
        <el-card class="table-card" hover-shadow>
          <div class="card-header">
            <h3 class="card-title">积分兑换数据明细</h3>
          </div>
          <div class="card-content">
            <el-table
              :data="exchangeData"
              border
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="id"
                label="ID"
                width="80">
              </el-table-column>
              <el-table-column
                prop="nick_name"
                label="用户名称"
                width="140">
              </el-table-column>
              <el-table-column
                prop="goods_name"
                label="兑换商品"
                width="180">
              </el-table-column>
              <el-table-column
                prop="points"
                label="消耗积分"
                width="120">
                <template slot-scope="scope">
                  <span class="points-text">{{ scope.row.points }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="add_time"
                label="兑换时间"
                width="180">
              </el-table-column>
            </el-table>
            <div style="margin-top: 20px;margin-left: 300px;" >
	              <el-pagination
	                      background
	                      @size-change="pageChange"
	                      @current-change="handleCurrentChange"
	                      :current-page="page"
	                      :page-size="pageSize"
	                      layout="total, sizes, prev, pager, next, jumper"
	                      :total="page_totle">
	              </el-pagination>
	          </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'LotteryDashboard',
  data() {
    return {
      // 参与情况数据
      participationData: [
        { name: '已参与', value: 0, color: '#409EFF',key:'yicanyu' },
        { name: '未参与', value: 0, color: '#E6A23C',key:'un_count' }
      ],
      
      // 商品一中奖率数据
      productOneData: [
        
        
      ],
      

      
      // 区域分布数据
      regionData: [
        
      ],
      
      page:1,
      pageSize:10,
      
      // 积分兑换数据
      exchangeData: [
        {
          id: 1,
          userName: '张三',
          exchangeItem: '商品A优惠券',
          points: 100,
          exchangeTime: '2023-07-20 14:30:25',
          status: '已兑换',
          statusType: 'success',
          operator: '系统自动'
        },
        {
          id: 2,
          userName: '李四',
          exchangeItem: '商品B折扣券',
          points: 150,
          exchangeTime: '2023-07-20 13:15:42',
          status: '已兑换',
          statusType: 'success',
          operator: '系统自动'
        },
        {
          id: 3,
          userName: '王五',
          exchangeItem: '精美礼品一份',
          points: 200,
          exchangeTime: '2023-07-20 11:08:37',
          status: '处理中',
          statusType: 'warning',
          operator: '系统自动'
        },
        {
          id: 4,
          userName: '赵六',
          exchangeItem: '现金红包',
          points: 500,
          exchangeTime: '2023-07-19 16:45:12',
          status: '已完成',
          statusType: 'info',
          operator: '管理员'
        },
        {
          id: 5,
          userName: '孙七',
          exchangeItem: '商品A优惠券',
          points: 100,
          exchangeTime: '2023-07-19 15:22:08',
          status: '已兑换',
          statusType: 'success',
          operator: '系统自动'
        }
      ],
      
      // 图表实例
      participationChart: null,
      productOneChart: null,
      productTwoChart: null,
      regionChart: null
    }
  },
  
  methods: {
    // 初始化参与情况统计饼图
    initParticipationChart() {
      this.participationChart = echarts.init(document.getElementById('participationChart'));
      
      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'transparent',
          padding: 10,
          textStyle: {
            color: '#fff',
            fontSize: 13
          },
          formatter: '{a} <br/>{b}: {c}人 ({d}%)'
        },
        series: [
          {
            name: '参与情况',
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 4,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.participationData.map(item => ({
              name: item.name,
              value: item.value,
              itemStyle: {
                color: item.color
              }
            }))
          }
        ],
        animation: true,
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut'
      };
      
      this.participationChart.setOption(option);
    },
    
    // 初始化商品一中奖率饼图
    initProductOneChart() {
      this.productOneChart = echarts.init(document.getElementById('productOneChart'));
      
      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'transparent',
          padding: 10,
          textStyle: {
            color: '#fff',
            fontSize: 13
          },
          formatter: '{a} <br/>{b}: {c}人'
        },
        series: [
          {
            name: '商品中奖数',
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 4,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.productOneData.map(item => ({
              name: item.name,
              value: item.value,
              itemStyle: {
                color: item.color
              }
            }))
          }
        ],
        animation: true,
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut'
      };
      
      this.productOneChart.setOption(option);
    },
    

    
    // 初始化区域分布柱状图
    initRegionChart() {
      this.regionChart = echarts.init(document.getElementById('regionChart'));
      
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'transparent',
          padding: 12,
          textStyle: {
            color: '#fff',
            fontSize: 13
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.regionData.map(item => item.name),
          axisLine: {
            lineStyle: {
              color: '#EBEEF5'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#606266',
            fontSize: 14
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#F2F3F5'
            }
          },
          axisLabel: {
            color: '#606266',
            fontSize: 12
          }
        },
        series: [
          {
            name: '用户数量',
            type: 'bar',
            data: this.regionData.map(item => item.value),
            itemStyle: {
              color: function(params) {
                return this.regionData[params.dataIndex].color;
              }.bind(this),
              borderRadius: [4, 4, 0, 0]
            },
            barWidth: '60%'
          }
        ],
        animation: true,
        animationDuration: 1500,
        animationEasing: 'cubicOut'
      };
      
      this.regionChart.setOption(option);
    },
    
    // 处理窗口大小变化
    handleResize() {
      if (this.participationChart) this.participationChart.resize();
      if (this.productOneChart) this.productOneChart.resize();
      if (this.regionChart) this.regionChart.resize();
    },
    getHomeData() {
      this.$api.post('/admin/getHomeData').then(res => {
        console.log(res)
        if (res.code == 200) {
          console.log(res.data)
          // this.participationData = res.data.data.participation;
          // this.productOneData = res.data.data.productOne;
          // this.regionData = res.data.data.region;
           this.participationData[0].value = res.data.yicanyu
           this.participationData[1].value = res.data.un_count

            const colors = ['#67C23A', '#F56C6C', '#E6A23C', '#409EFF', '#909399'];
           this.productOneData = res.data.goods_list.map((item, index) => ({
             name: item.name,
             value: item.value,
             color: colors[index % colors.length]
           }))
    
           this.regionData = res.data.areaList.map((item, index) => ({
             name: item.city || '未知',
             value: item.count,
             color: colors[index % colors.length]
           }))
    
          this.initParticipationChart();
          // this.initProductOneChart();
          this.initRegionChart();
        }
      })
    },
    getPointExchangeDetail() {
      let params = {
		          	page:this.page,
		          	pageSize:this.pageSize,
					      searchForm:{type:2}
		    }
      this.$api.post('/admin/getPointExchangeDetail',params).then(res => {
        console.log(res)
        if (res.code == 200) {
          let data = res.data
          this.page_totle = data.count
          this.exchangeData = data.result
        }
      })
    }
  },
  
  mounted() {
    // 初始化图表
    // this.initParticipationChart();
    // this.initProductOneChart();
    // this.initRegionChart();
    this.getHomeData()
    this.getPointExchangeDetail()
    // 添加窗口大小变化监听
    window.addEventListener('resize', this.handleResize);
  },
  
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', this.handleResize);
    
    // 销毁图表实例
    if (this.participationChart) this.participationChart.dispose();
    if (this.productOneChart) this.productOneChart.dispose();
    if (this.regionChart) this.regionChart.dispose();
  }
}
</script>

<style scoped>
/* 页面容器 */
.dashboard-container {
  background-color: #f5f7fa;
  height: calc(100vh - 64px); /* 减去顶部导航高度 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* 页面标题 */
.page-header {
  padding: 15px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  margin-bottom: 0;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.page-description {
  font-size: 14px;
  color: #606266;
}

/* 图表区域样式 */
.charts-row {
  padding: 15px;
  height: 320px;
  display: flex;
  align-items: stretch;
  margin-bottom: 30px;
}

.analysis-row {
  margin-bottom: 0;
}

.chart-card {
  height: 320px;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.analysis-card {
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.chart-card:hover, .analysis-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.department-card {
  margin-top: 20px;
}

.chart-header {
  padding: 12px 15px;
  border-bottom: 1px solid #EBEEF5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #EBEEF5;
}

.chart-title, .card-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.more-btn {
  color: #909399;
  padding: 0;
  height: auto;
}

.more-btn:hover {
  color: #409EFF;
  background-color: transparent;
}

.chart-content {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-content {
  padding: 15px;
  flex: 1;
  overflow-y: auto;
}

.chart-container {
  width: 100%;
  flex: 1;
  min-height: 150px;
}

/* 状态分布图例 */
.chart-legend {
  margin-top: 10px;
  flex-shrink: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-size: 12px;
  color: #606266;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 8px;
}

.legend-text {
  color: #606266;
}

.table-row {
  padding: 0 15px 15px;
  flex: 1;
  min-height: 0;
}

/* 状态分布图例 */
.status-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
}

/* 员工表格样式 */
.recent-employees-row {
  margin-bottom: 20px;
}

.employees-card {
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.employees-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.view-all-btn {
  color: #409EFF;
  padding: 0;
  height: auto;
  font-size: 14px;
}

.view-all-btn:hover {
  color: #66b1ff;
  background-color: transparent;
}

.el-table {
  border-radius: 0 0 6px 6px;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: 500;
}

.table-row-hover {
  transition: background-color 0.2s;
}

.table-row-hover:hover > td {
  background-color: #fafafa !important;
}

.employee-info {
  display: flex;
  align-items: center;
}

.employee-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.action-btn {
  padding: 0 5px;
}

.view-btn {
  color: #409EFF;
}

.view-btn:hover {
  color: #66b1ff;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 15px 10px;
  }
  
  .chart-header, .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .stat-value {
    font-size: 20px;
  }
}
</style>
